<template>
    <div class="teeth">
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">蛀牙</span>
        <span slot="more"></span>
        </LoginHeader>
        <p>是否蛀牙</p>
        <div :class="no" @click="noteeth">否</div>
        <div :class="yes" @click="yesteeth">是</div>
        <el-button v-show="choose" @click="ifteeth">确定</el-button>
        <div class="nextstep" v-show="next" @click="toyesteeth">
            <span>下一步</span>
            <i class="el-icon-arrow-right"></i>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            no:'p active',
            yes:'p noactive',
            choose:false,
            next:'',
            teeth:''
        }
    },
 components:{
        LoginHeader
    },
    watch:{
        choose:function(){
            this.next=!this.choose
        },
        no:function(){
            this.next=!this.choose
        }
    },
    mounted(){
        this.$http.get('/api/users/'+this.$store.state.username)
        .then(({
            data,config
        })=>{
            if(data.code==200){
                if(data.data.teeth==1){
                    this.yes='p active'
                    this.no='p noactive'
                }else{
                    this.no='p active'
                    this.yes='p noactive'
                    // this.choose=true
                }
            }
        })
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        noteeth(){
            this.no='p active'
            this.yes='p noactive'
            this.choose=true
        },
         yesteeth(){
            this.yes='p active'
            this.no='p noactive'
            this.choose=false
        },
        ifteeth(){
            this.$http.put('/api/users/'+this.$store.state.id,{teeth:0})
            .then(({
                data,config
            })=>{
                if(data.code==200){
                    console.log(data);
                    this.$message.success('修改蛀牙信息成功')
                    this.$router.push('/usercenter/userinfo')
                }else{
                    this.$message.error('修改蛀牙失败')
                }
            })
        },
        toyesteeth(){
            this.$router.push('/usercenter/edityesteeth')
        }
    }
}
</script>
<style lang="less" scoped>
.teeth{
    text-align: center;
    p{
        margin: 100px 0;
        color: #d6d6d6;
    }
    .p{
        color: #7f50d5;
        padding: 20px 0;
        margin: 0 100px;
    }
    .active{
        border-top:1px solid #f1f1f1;
        border-bottom:1px solid #f1f1f1;
    }
    .noactive{
        opacity: 0.3;
    }
    .el-button{
        width: 50%;
        border-radius: 30px;
        background-color: #7f50d5;
        padding: 15px 0;
        color: white;
        margin-top: 50px;
    }
    .nextstep{
        margin-top: 100px;
    text-align: right;
    margin-right: 50px;
    }
}
</style>